<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
            width: 500px;
            height: 50px;
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>
</body>
<script>
    // var result = 12 + 2 + "12" - 2 * 2;
    // document.write(result);

    // var arr = new Array(9);
    // console.log(arr);

    // var x = "15";
    // str = x + 5;
    // A = parseFloat(str);
    // document.write(A);

    var ul = document.getElementsByTagName("ul")[0];
    var liList = ul.getElementsByTagName("li");
    ul.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.targetName = "LI") {
            var content = target.textContent;
            var arr = [...liList];
            var index = arr.indexOf(target);
            console.log(content, index);
        }
    }


    function move(ele, attr, end, speed) {
        var cur = parseFloat(getStyle(ele, attr));
        var end = parseFloat(end);
        var speed = end > cur ? speed : -speed;
        var timer = setInterval(function () {
            cur += speed;
            ele.style[attr] = cur + "px";
            if (Math.abs(end - cur) <= Math.abs(speed)) {
                ele.style[attr] = end + "px";
                clearInterval(timer);
            }
        }, 1000);
    }
</script>

</html>